/*
* 组件名称: Manager.vue
*/

<template>
  <div>
    <div style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px; color: #39bf23">“融销通”农产品销售系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <img style="width: 40px; height: 40px; border-radius: 50%" :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="">
        <span style="margin-left: 5px">{{ data.user.name }}</span>
      </div>
    </div>

    <!-- Main Content Area -->
    <div style="display: flex">
      <!-- Side Menu -->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px); background-color: #eafcf6">
        <el-menu
            router
            style="border: none"
            :default-active="router.currentRoute.value.path"
            :default-openeds="['1', '2']"
            background-color="#eafcf6"
            text-color="#39bf23"
            active-text-color="#1c8400"
            @open="handleOpen"
            @close="handleClose">
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/buy" v-if="data.user.role === 'USER'">
            <el-icon><Goods /></el-icon>
            <span>农产品购买</span>
          </el-menu-item>
          <el-menu-item index="/cart" v-if="data.user.role === 'USER'">
            <el-icon><ShoppingCart /></el-icon>
            <span>购物车管理</span>
          </el-menu-item>
          <el-menu-item index="/orders" v-if="data.user.role === 'FARMER'||data.user.role === 'USER'">
            <el-icon><Tickets /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-sub-menu index="1" v-if="data.user.role === 'FARMER'">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>农产品管理</span>
            </template>
            <el-menu-item index="/category">
              <el-icon><Goods /></el-icon>
              <span>农产品分类管理</span>
            </el-menu-item>
            <el-menu-item index="/goods">
              <el-icon><Goods /></el-icon>
              <span>农产品管理</span>
            </el-menu-item>
            <el-menu-item index="/goodsStock">
              <el-icon><SoldOut /></el-icon>
              <span>农产品进货管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/postloan" v-if="data.user.role === 'FARMER'||data.user.role === 'BANK'">
            <el-icon><Document /></el-icon>
            <span>贷款信息</span>
          </el-menu-item>
          <el-menu-item index="/myloan" v-if="data.user.role === 'FARMER'">
            <el-icon><SoldOut /></el-icon>
            <span>我的贷款</span>
          </el-menu-item>
          <el-menu-item index="/knowledge" v-if="data.user.role === 'FARMER'||data.user.role === 'USER'">
            <el-icon><Tickets /></el-icon>
            <span>农产品知识</span>
          </el-menu-item>
          <el-menu-item index="/notice" v-if="data.user.role === 'ADMIN'">
            <el-icon><Bell /></el-icon>
            <span>系统公告管理</span>
          </el-menu-item>
          <el-sub-menu index="2" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin">
              <el-icon><User /></el-icon>
              <span>管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/user">
              <el-icon><User /></el-icon>
              <span>普通用户信息</span>
            </el-menu-item>
            <el-menu-item index="/farmer">
              <el-icon><User /></el-icon>
              <span>农户信息</span>
            </el-menu-item>
            <el-menu-item index="/bank">
              <el-icon><User /></el-icon>
              <span>银行信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3" v-if="data.user.role === 'BANK'">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>贷款管理</span>
            </template>
            <el-menu-item index="/approveloan">
              <el-icon><DocumentChecked /></el-icon>
              <span>审批贷款</span>
            </el-menu-item>
            <el-menu-item index="/lookloan">
              <el-icon><Tickets /></el-icon>
              <span>查看贷款</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/person">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/password">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
          <el-menu-item index="login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- Main Content -->
      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view @updateUser="updateUser" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { HomeFilled, Goods, ShoppingCart, Tickets, Menu, Document, SoldOut, Bell, Memo, User, Lock, SwitchButton, DocumentChecked } from "@element-plus/icons-vue";
import router from "@/router";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}')
});

if (!data.user?.id) {
  ElMessage.error('请登录！');
  router.push('/login');
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('system-user') || '{}');
};

const logout = () => {
  ElMessage.success('退出成功');
  localStorage.removeItem('system-user');
  router.push('/login');
};

// Placeholder for menu open/close events if needed
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
/* Modify the colors of the menu items */

.el-menu-item.is-active {
  background-color: #e0edfd !important;
}
.el-menu-item:hover {
  color: #1967e3;
}
.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #d1f9e6 !important;
  color: #1c8400 !important;
}


/* Ensure table header colors are correct */
:deep(th) {
  color: #333;
}

/* Additional styling for the top navigation bar */
.header-title {
  color: #fff;
}
.login-box span {
  color: #fff;
}
</style>